<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24" class="top-box">
        <div class="header-content">
          <div class="icon-box"></div>
          <div class="headerName">风控警报</div>

          <!-- 导出 -->
          <!-- <el-dropdown class="fast-export">
            <span class="export-title"
              ><i class="iconfont icon-download"></i>
              <span class="txt">导出</span>
            </span>
            <el-dropdown-menu slot="dropdown" class="foldingBox">
              <div class="line"></div>
              1111
            </el-dropdown-menu>
          </el-dropdown> -->

          <div
            class="fast-export"
            @mouseover="hover = 'block'"
            @mouseout="hover = 'none'"
          >
            <span class="export-title"
              ><i class="iconfont icon-download"></i>
              <span class="txt"
                >导出
                <div :style="{ display: hover }" class="hover_box">
                  <div class="item_hover_box">
                    <!-- <el-radio v-model="exportRadio" :label="index">{{
                      item.name
                    }}</el-radio> -->
                    <el-checkbox-group
                      v-model="checkedCities"
                      @change="handleCheckedCitiesChange"
                    >
                      <el-checkbox
                        v-for="item in exportList"
                        :label="item"
                        :key="item"
                        >{{ item }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </div>

                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                  >
                  <el-button size="mini" @click="allExport">导出全部</el-button>
                </div>
              </span>
            </span>
          </div>
        </div>

        <!-- cardInfo -->
        <div class="card-box">
          <div class="item-box" v-for="(item, index) in cardList" :key="index">
            <div>{{ item.name }}</div>
            <div>{{ item.num }}</div>
          </div>
        </div>
      </el-col>

      <el-col :span="24" class="botton-box">
        <!-- 统计图 -->
        <el-col :span="17" class="leftBottom-box">
          <div class="header-content">
            <div class="icon-box"></div>
            <div class="headerName">数据总览</div>
          </div>
          <div class="car-info">
            <el-button
              type="primary"
              plain
              size="small"
              @click="handState('carState')"
              >车辆状态（总:1)</el-button
            >
            <el-button
              type="primary"
              plain
              size="small"
              @click="HnadleOffline('offline')"
              >离线车辆(1)</el-button
            >
            <el-button type="primary" plain size="small" @click="handleRenewal"
              >待续费车辆(0)</el-button
            >
            <el-button type="primary" plain size="small" @click="handleSettle"
              >结清车辆(0)</el-button
            >
          </div>
          <el-col :span="12" v-show="!showRenewalChart">
            <div
              id="carStatusLeft"
              style="width: 100%;height:100%;"
              v-show="!showOffline"
            ></div>
            <div
              id="offlineState"
              style="width: 100%;height:100%;"
              v-show="showOffline"
            ></div>
          </el-col>
          <el-col
            :span="12"
            style="position: relative;"
            v-show="!showRenewalChart"
          >
            <div
              id="carStatusRight"
              style="width: 100%;height:100%;"
              v-show="!showOffline"
            ></div>
            <div
              id="offlineChart2"
              style="width: 100%;height:100%;"
              v-show="showOffline"
            ></div>
            <el-button
              type="primary"
              plain
              size="small"
              v-show="showOffline"
              style=" position: absolute;bottom: 10%;right:4%"
              @click="dialogTableVisible = true"
              >查看详情</el-button
            >
          </el-col>

          <el-col
            v-show="showRenewalChart && !showSettle"
            :span="24"
            style="position: relative;"
          >
            <div id="renewal" style="height:100%;width:100%"></div>
            <el-button
              type="primary"
              plain
              size="small"
              style=" position: absolute;bottom: 10%;right:4%"
              @click="$router.push({ path: '/data-manager/user' })"
              >查看详情</el-button
            >
          </el-col>

          <el-col v-show="showSettle" :span="24">
            <div id="settle" style="height:100%;width:100%"></div>
          </el-col>
        </el-col>

        <!-- 周期图 -->
        <el-col :span="7" class="rightBottom-box">
          <div class="header-content">
            <div class="icon-box"></div>
            <div class="headerName">新增车辆数据分析图</div>
          </div>

          <div class="car-info">
            <el-button type="primary" plain size="small">12个月</el-button>
            <el-button type="primary" plain size="small">30天</el-button>
          </div>
          <div class="cycle-chatr">
            <div id="month" style="height:100%;width:100%"></div>
          </div>
        </el-col>
      </el-col>
    </el-row>

    <!-- 详情dialog -->
    <el-dialog title="离线详情" :visible.sync="dialogTableVisible" width="70%">
      <div class="radio-box">
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">无线</el-radio>
        <el-radio v-model="radio" label="3">有线</el-radio>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="离线一天内" name="first">
          <el-table :data="offlineData" height="500px">
            <el-table-column property="number" label="序号"></el-table-column>
            <el-table-column
              property="carNum"
              label="车牌号"
              width="90"
            ></el-table-column>
            <el-table-column property="SIM" label="SIM卡号"></el-table-column>
            <el-table-column
              property="portNum"
              label="终端编号"
              width="100"
            ></el-table-column>
            <el-table-column
              property="carGroup"
              label="所属车组"
            ></el-table-column>
            <el-table-column
              property="carType"
              label="车辆类型"
            ></el-table-column>
            <el-table-column
              property="lastTime"
              label="最后在线时间"
              width="140"
            ></el-table-column>
            <el-table-column
              property="offlinLong"
              label="离线时长"
            ></el-table-column>
            <el-table-column
              property="address"
              label="位置"
              width="220"
            ></el-table-column>
            <el-table-column
              property="level"
              label="关注等级"
            ></el-table-column>
            <el-table-column property="note" label="关注备注"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="bottom-page">
            <el-button type="primary" class="iconfont icon-daochu" size="minni"
              >导出</el-button
            >

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              layout="total, sizes, prev, pager, next"
              :total="1"
            >
            </el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="离线1-3天" name="second">
          <el-table :data="offlineData" height="500px">
            <el-table-column property="number" label="序号"></el-table-column>
            <el-table-column
              property="carNum"
              label="车牌号"
              width="90"
            ></el-table-column>
            <el-table-column property="SIM" label="SIM卡号"></el-table-column>
            <el-table-column
              property="portNum"
              label="终端编号"
              width="100"
            ></el-table-column>
            <el-table-column
              property="carGroup"
              label="所属车组"
            ></el-table-column>
            <el-table-column
              property="carType"
              label="车辆类型"
            ></el-table-column>
            <el-table-column
              property="lastTime"
              label="最后在线时间"
              width="140"
            ></el-table-column>
            <el-table-column
              property="offlinLong"
              label="离线时长"
            ></el-table-column>
            <el-table-column
              property="address"
              label="位置"
              width="220"
            ></el-table-column>
            <el-table-column
              property="level"
              label="关注等级"
            ></el-table-column>
            <el-table-column property="note" label="关注备注"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="离线3-7天" name="third">
          <el-table :data="offlineData" height="500px">
            <el-table-column property="number" label="序号"></el-table-column>
            <el-table-column
              property="carNum"
              label="车牌号"
              width="90"
            ></el-table-column>
            <el-table-column property="SIM" label="SIM卡号"></el-table-column>
            <el-table-column
              property="portNum"
              label="终端编号"
              width="100"
            ></el-table-column>
            <el-table-column
              property="carGroup"
              label="所属车组"
            ></el-table-column>
            <el-table-column
              property="carType"
              label="车辆类型"
            ></el-table-column>
            <el-table-column
              property="lastTime"
              label="最后在线时间"
              width="140"
            ></el-table-column>
            <el-table-column
              property="offlinLong"
              label="离线时长"
            ></el-table-column>
            <el-table-column
              property="address"
              label="位置"
              width="220"
            ></el-table-column>
            <el-table-column
              property="level"
              label="关注等级"
            ></el-table-column>
            <el-table-column property="note" label="关注备注"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="离线7天-1个月" name="fourth">
          <el-table :data="offlineData" height="500px">
            <el-table-column property="number" label="序号"></el-table-column>
            <el-table-column
              property="carNum"
              label="车牌号"
              width="90"
            ></el-table-column>
            <el-table-column property="SIM" label="SIM卡号"></el-table-column>
            <el-table-column
              property="portNum"
              label="终端编号"
              width="100"
            ></el-table-column>
            <el-table-column
              property="carGroup"
              label="所属车组"
            ></el-table-column>
            <el-table-column
              property="carType"
              label="车辆类型"
            ></el-table-column>
            <el-table-column
              property="lastTime"
              label="最后在线时间"
              width="140"
            ></el-table-column>
            <el-table-column
              property="offlinLong"
              label="离线时长"
            ></el-table-column>
            <el-table-column
              property="address"
              label="位置"
              width="220"
            ></el-table-column>
            <el-table-column
              property="level"
              label="关注等级"
            ></el-table-column>
            <el-table-column property="note" label="关注备注"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
        <el-tab-pane label="离线超过1个月" name="fifth">
          <el-table :data="offlineData" height="500px">
            <el-table-column property="number" label="序号"></el-table-column>
            <el-table-column
              property="carNum"
              label="车牌号"
              width="90"
            ></el-table-column>
            <el-table-column property="SIM" label="SIM卡号"></el-table-column>
            <el-table-column
              property="portNum"
              label="终端编号"
              width="100"
            ></el-table-column>
            <el-table-column
              property="carGroup"
              label="所属车组"
            ></el-table-column>
            <el-table-column
              property="carType"
              label="车辆类型"
            ></el-table-column>
            <el-table-column
              property="lastTime"
              label="最后在线时间"
              width="140"
            ></el-table-column>
            <el-table-column
              property="offlinLong"
              label="离线时长"
            ></el-table-column>
            <el-table-column
              property="address"
              label="位置"
              width="220"
            ></el-table-column>
            <el-table-column
              property="level"
              label="关注等级"
            ></el-table-column>
            <el-table-column property="note" label="关注备注"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "Dashboard",
  data() {
    return {
      hover: "none",
      exportRadio: "",
      isIndeterminate: true,
      checkAll: false,
      // exportList: [
      //   { name: "二押点 (0)" },
      //   { name: "区域报警 (0)" },
      //   { name: "重点关注 (0)" },
      //   { name: "风险车辆 (0)" },
      //   { name: "拆除报警 (0)" },
      //   { name: "掉电报警 (0)" },
      //   { name: " 出省报警 (0)" },
      //   { name: "异常停留报警 (0)" },
      //   { name: " 超长报警 (0)" },
      //   { name: " 超速报警 (0)" },
      //   { name: " 紧急报警 (0)" },
      //   { name: " 其他报警 (0)" }
      // ],
      exportList: [
        "二押点 (0)",
        "区域报警 (0)",
        "重点关注 (0)",
        "风险车辆 (0)",
        "拆除报警 (0)",
        "掉电报警 (0)",
        " 出省报警 (0)",
        "异常停留报警 (0)",
        " 超长报警 (0)",
        " 超速报警 (0)",
        " 紧急报警 (0)",
        " 其他报警 (0)"
      ],

      checkedCities: ['二押点 (0)"', "区域报警 (0)"],

      cardList: [
        {
          name: "重点关注",
          num: 0
        },
        {
          name: "风险车辆",
          num: 0
        },
        {
          name: "多设备离线",
          num: 0
        },
        {
          name: "分离报警",
          num: 0
        },
        {
          name: "拆除报警",
          num: 0
        },
        {
          name: "掉电报警",
          num: 0
        },
        {
          name: "超长停车",
          num: 0
        },
        {
          name: "二押点报警",
          num: 0
        },
        {
          name: "出省报警",
          num: 0
        },
        {
          name: "异常停留",
          num: 0
        },
        {
          name: "区域报警",
          num: 0
        },
        {
          name: "超速报警",
          num: 0
        },
        {
          name: "紧急报警",
          num: 0
        },
        {
          name: "其他报警",
          num: 0
        }
      ],

      chart: null,

      option: {
        color: ["#00bfff", "#19d4ae"],

        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "有线" },
              { value: 1, name: "无线" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },

      chart1: null,
      option1: {
        color: ["#00bfff", "#19d4ae"],

        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [{ value: 1, name: "WX01A-W(1)" }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },

      offlineChart: null,
      showOffline: false,
      option3: {
        color: ["#43cd80", "#333333", "#7a7a7a"],

        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "在线" },
              { value: 0, name: "从未上线" },
              { value: 1, name: "离线" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },

      offlineChartRight: null,
      option4: {
        color: ["#bac1c6", "#8f99a1", "#909599", "#668b8b", "#787e82"],

        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "离线一天内(0)" },
              { value: 0, name: "离线1-3天(0)" },
              { value: 0, name: "离线3-7天(0)" },
              { value: 1, name: "离线7天-1个月(1)" },
              { value: 0, name: "离线超过1个月(0)" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },

      dialogTableVisible: false,
      offlineData: [
        {
          number: "N0.01",
          carNum: "川A12345",
          SIM: "000.008",
          portNum: "192.168.1.1",
          carGroup: "1组",
          carType: "保时捷",
          lastTime: "2021.7.11 15:09:09",
          offlinLong: "1H",
          address: "上海市普陀区金沙江路 1518 弄",
          level: "一级",
          note: ""
        }
      ],

      activeName: "first",

      radio: "1",

      currentPage4: 4,

      showRenewalChart: false,

      renewalChart: null,
      option5: {
        color: ["#ffb980", "#19d4ae", "#5ab1ef", "#fa6e86"],

        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "已过期(0)" },
              { value: 0, name: "3天到期(0)" },
              { value: 0, name: "7天到期(0)" },
              { value: 0, name: "1个月到期(0)" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },

      showSettle: false,
      settleChart: null,
      option6: {
        color: ["#00bfff", "#19d4ae"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "结清(0)" },
              { value: 1, name: "未结清(1)" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },

      monthChart: null,
      monthOption: {
        tooltip: {
          trigger: "axis"
        },
        color: ["#46dcbe", "#7fc2f3", "#fc9dae"],
        legend: {
          data: ["加车量", "结清量", "激活量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2020-08",
            "2020-10",
            "2020-12",
            "2021-02",
            "2021-04",
            "2021-06"
          ]
        },
        yAxis: {
          type: "value",
          max: 1,
          min: 0,
          axisLine: {
            //隐藏y轴
            show: false
          }
        },
        series: [
          {
            name: "加车量",
            type: "line",
            stack: "总量",
            data: [0, 0, 0, 1, 0, 0],

            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: "default",
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: "#3ebf9b"
                      },
                      {
                        offset: 0.5,
                        color: "#267268"
                      },
                      {
                        offset: 1,
                        color: "#14323f"
                      }
                    ]
                  )
                }
              }
            }
          },
          {
            name: "结清量",
            type: "line",
            stack: "总量"
            // data: [0, 0, 0, 0, 1, 0]
          },
          {
            name: "激活量",
            type: "line",
            stack: "总量"
            // data: [0, 0, 0, 0, 1, 0]
          }
        ]
      }
    };
  },

  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById("carStatusLeft"));

      this.chart.setOption(this.option);
      window.onresize = () => {
        this.chart.resize();
      };
    },

    initRight() {
      this.chart1 = echarts.init(document.getElementById("carStatusRight"));

      this.chart1.setOption(this.option1);
      window.onresize = () => {
        this.chart1.resize();
      };
    },

    // 车辆状态按钮
    handState() {
      this.showOffline = false;

      this.initChart();
      this.initRight();
    },

    // 离线车辆按钮
    HnadleOffline() {
      this.showOffline = true;
      // debugger
      this.offlineChart = echarts.init(document.getElementById("offlineState"));
      this.offlineChart.setOption(this.option3);

      window.onresize = () => {
        this.offlineChart.resize();
        this.offlineChartRight.resize();
      };

      this.$nextTick(() => {
        this.offlineChart.resize();
        this.offlineChartRight.resize();
      });

      this.offlineChartRight = echarts.init(
        document.getElementById("offlineChart2")
      );
      this.offlineChartRight.setOption(this.option4);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //点击待续费按钮
    handleRenewal() {
      this.showRenewalChart = true;

      this.renewalChart = echarts.init(document.getElementById("renewal"));
      this.renewalChart.setOption(this.option5);

      window.onresize = () => {
        this.renewalChart.resize();
      };

      this.$nextTick(() => {
        this.renewalChart.resize();
      });
    },

    // 结清车辆按钮
    handleSettle() {
      this.showSettle = true;

      this.settleChart = echarts.init(document.getElementById("settle"));
      this.settleChart.setOption(this.option6);

      window.onresize = () => {
        this.settleChart.resize();
      };

      this.$nextTick(() => {
        this.settleChart.resize();
      });
    },

    initMonthChart() {
      this.monthChart = echarts.init(document.getElementById("month"));
      this.monthChart.setOption(this.monthOption);

      window.onresize = () => {
        this.monthChart.resize();
      };
    },

    // 导出全部
    allExport() {},

    handleCheckAllChange(val) {
      this.checkedCities = val ? this.exportList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.exportList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.exportList.length;
    }
  },

  mounted() {
    this.handState();
    this.initMonthChart();
  }
};
</script>

<style lang="scss">
body {
  .foldingBox {
    transition-property: transform opacity;
    animation-timing-function: ease-out;
    transition-duration: 0.4s;
    width: 386px;
    border: 1px solid #1d8ce0;
    border-top-right-radius: 0;
    position: relative;
    .line {
      position: absolute;
      right: -1px;
      top: -10px;
      width: 65px;
      height: 10px;
      background: #fff;
      border-right: 1px solid #1d8ce0;
    }
  }

  .el-popper {
    margin-top: -5px !important;
    padding: 0 5px;
    position: relative;

    .popper__arrow {
      display: none !important;
    }
  }
}

.hover_box {
  z-index: 999;
  position: absolute;
  top: 25px;
  right: 0;
  width: 360px;
  background-color: #fff;
  border: 1px solid #409eff;
  color: rgb(163, 153, 153);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 0;
  transition: height 2s;

  .item_hover_box {
    width: 100%;
    float: left;


    & > :hover {
      color: #409eff;
    }
  }
}

.radio-box {
  width: 50%;
  float: right;
  height: 40px;
  line-height: 40px;
}

.bottom-page {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .icon-daochu {
    font-size: 12px;
  }
}

.el-tabs__header {
  width: 50%;
}

.el-tabs__nav-wrap::after {
  background-color: transparent;
}
.dashboard-container {
  height: 100%;
  padding: 20px;
  background: #e7ebef;
  .card-box {
    height: calc(100% - 48px) !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item-box {
      text-align: center;
      width: 13%;
      height: 50%;
      border: 1px solid #edf0f8;
      background: #fdfdfd;
      margin-bottom: 3px;

      &:hover {
        transform: perspective(1px) translateZ(0);
        // box-shadow: 4px 4px 5px #999;
        box-shadow: 0 0 9px 1px #999;
        position: relative;
      }

      & > :first-child {
        font-size: 14px;
        margin-top: 35px;
      }

      & :nth-child(2) {
        margin-top: 23px;
        color: #00a0ff;
        font-size: 22px;
        cursor: pointer;
        font-weight: 900;
      }
    }
  }

  .el-row {
    height: 100%;

    box-shadow: 0 0 4px #d1d1d1;
    .el-col {
      background-color: #fff;
      height: 50%;
      padding: 10px;
    }
    & > :first-child {
      height: calc(50% - 10px);
      margin-bottom: 10px;
    }
  }

  .header-content {
    height: 38px;
    line-height: 38px;

    .icon-box {
      float: left;
      margin-top: 9px;
      margin-left: 5px;
      width: 8px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      position: relative;
      line-height: 20px;
      border-left: 5px solid #1d8ce0;
    }
    .headerName {
      float: left;
      font-size: 14px;
      color: #000;
      font-weight: bold;
      margin-left: 5px;
    }

    .fast-export {
      position: absolute;
      right: 0.8%;

      .export-title {
        z-index: 9999;
        position: relative;
        color: #7f7d7d;
        height: 22px;
        display: inline-block;
        line-height: 22px;
        text-align: center;
        padding: 0 8px;
        border-radius: 3px;
        cursor: pointer;
        background: #fff;

        &:hover {
          width: 100%;
          height: 100%;
          border: 1px solid #1d8ce0;
          border-bottom-right-radius: 0;
          border-bottom: none;
        }

        span {
          vertical-align: middle;
        }

        .iconfont {
          font-family: "iconfont" !important;
          font-size: 16px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        .txt {
          margin-left: 5px;
        }
      }
    }
  }

  .botton-box {
    width: 100%;
    .car-info {
      width: 100%;
      // height: 31px;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 3px;
    }
    .leftBottom-box {
      width: 70%;
      height: 100%;
      background-color: #fff;
      box-shadow: 0 0 4px #d1d1d1;
      margin-right: 10px;

      .el-col {
        height: calc(100% - 81px);
      }
    }

    .rightBottom-box {
      width: calc(30% - 10px);
      height: 100%;
      background-color: #fff;
      box-shadow: 0 0 4px #d1d1d1;

      .cycle-chatr {
        height: calc(100% - 70px);
      }
    }
  }
}
</style>
